<template>
  <div class="index-ChartProductionInfo">
    <div class="index-module-header-pro">
      <div class="index-module-title" style="color: white !important;">折线图</div>
    </div>
    <div ref="chartRef" class="index-ChartProductionInfo-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null)
let mapChart = null

const fontSize = (px) => {
  //传入字体大小
  // let clientWidth = window.innerWidth || document.body.clientWidth; //屏幕尺寸
  // if (!clientWidth) {
  // 	return 0;
  // }
  // let fontSize = clientWidth / 1920; //设计稿尺寸
  // return px * fontSize; //转换为 rem的布局返回出去

  let clientHeight = window.innerHeight || document.body.clientHeight //屏幕尺寸
  if (!clientHeight) {
    return 0
  }
  let fontSize = clientHeight / 1080 //设计稿尺寸
  return px * fontSize //转换为 rem的布局返回出去
}

// 数据
let xLabel = ['5', '6', '7', '8', '9', '10', '11']
let goToSchool = ['40', '60', '22', '85', '50', '40', '45']
let goOutSchool = ['20', '50', '12', '65', '30', '60', '50']
let goOutSchools = ['50', '65', '20', '12', '50', '22', '54']

let series = [
  {
    name: '每日设备数',
    type: 'line',
    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
    showAllSymbol: true,
    symbolSize: 0,
    smooth: false,
    color: '#1890FFFF', // 线条颜色
    lineStyle: {
      width: fontSize(1.6),
      color: '#1890FFFF', // 线条颜色
      borderColor: 'rgba(0,0,0,.4)'
    },
    tooltip: {
      show: true
    },
    data: goToSchool
  },
  {
    name: '每日居民数',
    type: 'line',
    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
    showAllSymbol: true,
    symbolSize: 0,
    smooth: false,
    color: '#B9AFA3FF', // 线条颜色
    lineStyle: {
      width: fontSize(1.6),
      color: '#B9AFA3FF', // 线条颜色
      borderColor: 'rgba(0,0,0,.4)'
    },
    tooltip: {
      show: true
    },

    data: goOutSchools
  }
  // {
  //   name: '增长率',
  //   type: 'line',
  //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
  //   showAllSymbol: true,
  //   symbolSize: 0,
  //   smooth: false,
  //   color: '#41E4BBFF', // 线条颜色
  //   lineStyle: {
  //     width: fontSize(1.6),
  //     color: '#41E4BBFF', // 线条颜色
  //     borderColor: 'rgba(0,0,0,.4)'
  //   },
  //   tooltip: {
  //     show: true
  //   },
  //   data: goOutSchool
  // }
]

let option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    confine: true,
    extraCssText: 'padding: 0;border: none;',
    backgroundColor: 'rgba(1,1,1,0.7)',
    formatter: function (params) {
      // console.log(789, params);
      // 	<div class="index-item"><div class="index-item-icon" style="background-color: #41E4BBFF;"></div>${params[2].seriesName}<div class="index-item-value">${params[2].value}%</div> </div>
      let tooltipHtml = `<div class="index-map-tooltip">
					<div>2023-${params[0].axisValue}-23</div>
					<div class="index-item"><div class="index-item-icon" style="background-color: #1890FFFF;"></div>${params[0].seriesName}<div class="index-item-value">${params[0].value}</div> </div>
					<div class="index-item"><div class="index-item-icon" style="background-color: #B9AFA3FF;"></div>${params[1].seriesName}<div class="index-item-value">${params[1].value}</div> </div>
				

                    </div>`

      return tooltipHtml
    },

    //提示内容样式
    textStyle: {
      color: '#fff'
    },
    tooltip: {
      position: ['20%', '5%']
    }
  },
  grid: {
    top: '20%',
    bottom: '0%',
    left: '0%',
    right: '0%',
    containLabel: true
  },
  legend: {
    show: true,
    x: 'center',
    y: fontSize(5),
    icon: 'stack',
    itemWidth: fontSize(12),
    itemHeight: fontSize(4),
    textStyle: {
      color: '#FFFFFF99',
      fontSize: fontSize(12)
    },
    data: ['每日设备数', '每日居民数']
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#C2AA90',
        fontSize: 10
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7C6951'
        }
      },
      data: xLabel
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        color: '#C2AA90',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(207,166,114,0.4)'
        }
      }
    },
    {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}',
        color: '#C2AA90',
        fontSize: 10
      },
      axisLine: {
        lineStyle: {
          color: '#C2AA90'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#C2AA90'
        }
      }
    }
  ],
  series: series
}

const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(option)
  // 轮播  i是根据实际的场景来 现在默认展示的是7个月 
  let i = 0;
  setInterval(() => {
    if (i > 7) {
      i = 0;
    }
    mapChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: i,
    });
    i++;
  }, 3000);
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  clearInterval(setInterval)
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-ChartProductionInfo {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;
  background: rgba(98, 81, 55, 0.1);

  .index-ChartProductionInfo-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    // border: 1px solid red;
  }

  .index-map-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 12px 18px;
    color: #ecf8ffe6;

    .index-item {
      display: flex;
      align-items: center;

      .index-item-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .index-item-value {
        margin-left: 10px;
      }
    }
  }
}
</style>
